import React from 'react';
import { motion } from 'framer-motion';
import { Search, Filter, X, Flag, Tag, CheckCircle, Circle, Clock } from 'lucide-react';

const FilterBar = ({ 
  searchTerm, 
  setSearchTerm, 
  filters, 
  setFilters, 
  darkMode 
}) => {
  const handleFilterChange = (key, value) => {
    setFilters(prev => ({
      ...prev,
      [key]: prev[key] === value ? '' : value
    }));
  };

  const clearFilters = () => {
    setSearchTerm('');
    setFilters({
      status: '',
      priority: '',
      category: ''
    });
  };

  const hasActiveFilters = searchTerm || filters.status || filters.priority || filters.category;

  return (
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      className="glass-effect p-4 mb-6"
    >
      {/* 搜索框 */}
      <div className="relative mb-4">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          type="text"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="搜索任务..."
          className="input-field w-full pl-10"
        />
        {searchTerm && (
          <button
            onClick={() => setSearchTerm('')}
            className="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 rounded-full hover:bg-white/10 transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>

      {/* 过滤器 */}
      <div className="space-y-3">
        <div className="flex items-center gap-2 mb-2">
          <Filter className="w-4 h-4" />
          <span className={`text-sm font-medium ${
            darkMode ? 'text-white/80' : 'text-gray-700'
          }`}>
            筛选条件
          </span>
          {hasActiveFilters && (
            <button
              onClick={clearFilters}
              className="text-xs text-primary-400 hover:text-primary-300 transition-colors"
            >
              清除全部
            </button>
          )}
        </div>

        {/* 状态筛选 */}
        <div>
          <div className={`text-xs font-medium mb-2 ${
            darkMode ? 'text-white/60' : 'text-gray-600'
          }`}>
            状态
          </div>
          <div className="flex gap-2 flex-wrap">
            <button
              onClick={() => handleFilterChange('status', 'all')}
              className={`filter-chip ${
                filters.status === 'all' ? 'active' : ''
              }`}
            >
              <Circle className="w-3 h-3" />
              全部
            </button>
            <button
              onClick={() => handleFilterChange('status', 'pending')}
              className={`filter-chip ${
                filters.status === 'pending' ? 'active' : ''
              }`}
            >
              <Clock className="w-3 h-3" />
              待完成
            </button>
            <button
              onClick={() => handleFilterChange('status', 'completed')}
              className={`filter-chip ${
                filters.status === 'completed' ? 'active' : ''
              }`}
            >
              <CheckCircle className="w-3 h-3" />
              已完成
            </button>
          </div>
        </div>

        {/* 优先级筛选 */}
        <div>
          <div className={`text-xs font-medium mb-2 ${
            darkMode ? 'text-white/60' : 'text-gray-600'
          }`}>
            优先级
          </div>
          <div className="flex gap-2 flex-wrap">
            <button
              onClick={() => handleFilterChange('priority', 'high')}
              className={`filter-chip ${
                filters.priority === 'high' ? 'active' : ''
              }`}
            >
              <Flag className="w-3 h-3 text-red-400" />
              高
            </button>
            <button
              onClick={() => handleFilterChange('priority', 'medium')}
              className={`filter-chip ${
                filters.priority === 'medium' ? 'active' : ''
              }`}
            >
              <Flag className="w-3 h-3 text-yellow-400" />
              中
            </button>
            <button
              onClick={() => handleFilterChange('priority', 'low')}
              className={`filter-chip ${
                filters.priority === 'low' ? 'active' : ''
              }`}
            >
              <Flag className="w-3 h-3 text-green-400" />
              低
            </button>
          </div>
        </div>

        {/* 分类筛选 */}
        <div>
          <div className={`text-xs font-medium mb-2 ${
            darkMode ? 'text-white/60' : 'text-gray-600'
          }`}>
            分类
          </div>
          <div className="flex gap-2 flex-wrap">
            {[
              { value: 'work', label: '工作' },
              { value: 'personal', label: '个人' },
              { value: 'shopping', label: '购物' },
              { value: 'health', label: '健康' },
              { value: 'study', label: '学习' },
              { value: 'general', label: '通用' }
            ].map(({ value, label }) => (
              <button
                key={value}
                onClick={() => handleFilterChange('category', value)}
                className={`filter-chip ${
                  filters.category === value ? 'active' : ''
                }`}
              >
                <Tag className="w-3 h-3" />
                {label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default FilterBar;